<template>
    <div class="containers">
        <div style="text-align:center;">流程设计</div>
        <div class="canvas" ref="canvas"></div>
        <div id="js-properties-panel" class="panel"></div>
    </div>
  </template>
  
  <script>
  import BpmnModeler from 'bpmn-js/lib/Modeler'; //引入相关依赖
  import {xmlStr} from './mock/xmlStr'; //引用xml字符串

  
  import {activitiLanguage} from './language/activiti_zh_CN';


  import {customTranslate} from './language/customTranslate';
  import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
  } from 'bpmn-js-properties-panel'
  // import activitiModdle from 'activiti-bpmn-moddle/resources/activiti'
  // import activitiModdleExtension  from 'activiti-bpmn-moddle/lib'

   
  export default {
    name: "designProcess",
    data() {
      return{
        bpmnModeler:null,
        container:null,
        canvas:null,
      }
    },
    created() {
    },
    mounted(){
        this.init()
    },
    methods: {
     init(){
        const canvas=this.$refs.canvas
        console.log("1",activitiLanguage);
        console.log("2",customTranslate);
        const customTranslateModule = {
          translate: ['value', customTranslate(activitiLanguage)]
        }
        this.bpmnModeler=new BpmnModeler({
            container: canvas,
        //添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
          // activitiModdleExtension,
          customTranslateModule
        ],
        moddleExtensions: {
           //如果要在属性面板中维护activiti：XXX属性，则需要此 
          //  activiti: activitiModdle
        }
        })
        this.createNewDiagram()
     },
     createNewDiagram(){
        console.log(xmlStr);
        console.log(this.$refs.canvas);
        // this.success();
        this.bpmnModeler.importXML(xmlStr).then(()=>{
          console.log("导入xml流程成功！")
            this.success();
        })
     },
     addEventBusListener() {
      // 监听 element
      let that = this
      const eventBus = this.bpmnModeler.get('eventBus')
      const eventTypes = ['element.click', 'element.changed', 'element.updateLabel']
      eventTypes.forEach(function(eventType) {
        eventBus.on(eventType, function(e) {
          console.log(eventType)
          if (!e || e.element.type == 'bpmn:Process') return
          if (eventType === 'element.changed') {
            // that.elementChanged(e)
          } else if (eventType === 'element.click') {
            console.log('点击了element', e)
            // if (e.element.type === 'bpmn:Task') {
            // }
          } else if (eventType === 'element.updateLabel') {
            console.log('element.updateLabel', e.element)
          }
        })
      })
    },
     success(){
        this.addEventBusListener()
     }
    }
  };
  </script>
  
  <style rel="stylesheet/scss" lang="scss">
    .containers{
        position: absolute;
        background-color: #fff;
        width: 100%;
        height: 100%;
    }
    .canvas{
        width: 100%;
        height: 100%;
    }

    .panel{
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
    }
  </style>
  